<template>
  <div class="flex">
    <div class="box">
      <div>{{ days }}</div>
      <div>DAY</div>
    </div>
    <div class="box">
      <div>{{ hours }}</div>
      <div>H</div>
    </div>
    <div class="box">
      <div>{{ minutes }}</div>
      <div>M</div>
    </div>
    <div class="box">
      <div>{{ seconds }}</div>
      <div>S</div>
    </div>
    <!-- <p>{{ days }} 天 {{ hours }} 时 {{ minutes }} 分 {{ seconds }} 秒</p> -->
  </div>
</template>

<script>
export default {
  props: {
    endDate: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      timer: null,
    };
  },
  mounted() {
    this.startCountdown();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    startCountdown() {
      const targetDate = new Date(this.endDate).getTime();
      this.timer = setInterval(() => {
        const now = new Date().getTime();
        const distance = targetDate - now;

        if (distance < 0) {
          clearInterval(this.timer);
          this.days = this.hours = this.minutes = this.seconds = 0;
        } else {
          this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
          this.hours = Math.floor(
            (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          );
          this.minutes = Math.floor(
            (distance % (1000 * 60 * 60)) / (1000 * 60)
          );
          this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .box {
    padding: 22px 0;
    margin: 40px 7px 44px;
    width: 144px;
    height: 182px;
    box-sizing: border-box;
    border-radius: 16px;
    font-family: Alimama;
    text-align: center;
    background: #0e1220;
    :first-child {
      font-weight: 800;
      font-size: 84px;
      background: linear-gradient(
        269.634612690705deg,
        #574bdd 0%,
        #c753fc 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 10px;
    }
    :last-child {
      font-size: 26px;
      color: #cdd5ec;
    }
  }
}
</style>
